<template>
  <div class="person">
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }},{{ nianling }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>
  
<script lang="ts" setup name="Person">
   import { reactive,toRefs,toRef } from 'vue';
   let person = reactive({
       name: '张三',
       age: 18,
   })
   //toRefs 和 toRef 都是将响应式对象转换为普通对象，使其具备响应式的能力
   // 但是 toRefs 是将响应式对象的每一个属性都转换为普通对象
   // 而 toRef 是将响应式对象的某一个属性转换为普通对象。
   //
   let { name, age } = toRefs(person); // 使用 toRefs 将响应式对象转换为普通对象
   let nianling = toRef(person, 'age'); // 使用 toRef 将响应式对象的属性转换为普通对象
  //  function changeName() {
  //      person.name += '*';
  //  }
  //  function changeAge() {
  //      person.age += 1;
  //  }

  function changeName() {
    name.value += '*';
  }
  function changeAge() {
    age.value += 1;
  }
</script>

<style scoped>
  .person {
      background-color: skyblue;
      box-shadow: 0 0 10px;
      border-radius: 10px;
      padding: 20px;
  }
  button {
      margin: 0 5px;
  }
  li {
      font-size: 20px;
  }
</style>